﻿@page "/DateRangePicker/Format"

@using Syncfusion.Blazor.Calendars
@using System
@using Syncfusion.Blazor.DropDowns
@using Newtonsoft.Json
@inherits SampleBaseComponent;

<SampleDescription>
   <p>In the Blazor [Date Range Picker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) example, the DateRangePicker has been configured with the <code>dd-MMM-yy hh:mm tt</code> date time format.</p>
</SampleDescription>
<ActionDescription>
    <p>Format sample explains the support of custom date time format in the DateRangePicker component by using the <a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.DateRangePickerModel.html#Syncfusion_Blazor_Calendars_DateRangePickerModel_Format' target='_blank'> Format</a> property.</p>
</ActionDescription>

    <div>
        <div class=" control-section col-lg-8 date-height">
            <div id="wrapper" class="daterangepicker-section">
                <div id="daterangepicker-control">
                    <SfDateRangePicker TValue="DateTime?" Format="@format" StartDate="@Start" EndDate="@End"></SfDateRangePicker>
                </div>
            </div>
        </div>
        <div class="col-lg-4 property-section">
            <div>
                <SfDropDownList TItem="DateFormat" TValue="string" PopupHeight="230px" @bind-Index="@index" DataSource="@formats">
                    <DropDownListEvents TValue="string" TItem="DateFormat" ValueChange="OnChange"></DropDownListEvents>
                    <DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings>
                </SfDropDownList>
            </div>
        </div>
    </div>

<style>
    #wrapper {
        max-width: 300px;
        margin: 0px auto;
        padding-top: 20px;
    }

    .control-section.col-lg-8.date-height {
        border-right: 1px solid #D7D7D7;
        min-height: 365px;
    }

    .property-section {
        top: 55px;
        width: 200px;
        margin-left: 80px;
        padding-bottom: 15px;
    }
</style>

@code {
    public DateTime? Start { get; set; } = DateTime.Now;
    public DateTime? End { get; set; } = DateTime.Now.AddDays(20);
    
    public class DateFormat
    {
        public string ID { get; set; }

        public string Text { get; set; }
    }
    public string format { get; set; } = "dd/MMM/yy hh:mm tt";
    private List<DateFormat> formats = new List<DateFormat>() {
        new DateFormat(){ ID= "format1", Text= "dd/MMM/yy hh:mm tt" },
        new DateFormat(){ ID= "format2", Text= "yyyy/MM/dd HH:mm" },
        new DateFormat(){ ID= "format3", Text= "dd/MMMM/yyyy" },
     };
     private int? index { get; set; } = 0;
    public void OnChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, DateFormat> args)
    {
        this.format = args.ItemData?.Text;
    }
}